<template>
  <div>
    <a-modal
      :title="person.personName"
      :width="1080"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @cancel="handleCancel"
      cancelText="取消"
      footer=""
    >
      <a-card
        style="width:100%"
        :tab-list="tabListNoTitle"
        :active-tab-key="this.noTitleKey"
        @tabChange="key => onTabChange(key, 'noTitleKey')"
      >
        <div v-if="noTitleKey === '0'">
          <a-spin :spinning="confirmLoading">
            <a-form :form="form">
              <div style="display: flex; flex-direction: row; justify-content: space-around; align-items: center">
                <div style="width: 66%">
                  <a-row :gutter="12">
                    <a-col :md="12" :sm="24">
                      <a-form-item
                        label="证件号"
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                      >
                        <a-input
                          v-decorator="['personCard', {initialValue: person.personCard, rules: [{ required: true, message: '请输入证件号', trigger: 'blur' }]}]" />
                      </a-form-item>
                    </a-col>
                    <a-col :md="12" :sm="24">
                      <a-form-item
                        label="姓名"
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                      >
                        <a-input v-decorator="['personName', {initialValue: person.personName, rules: [{required: true, message: '请输入姓名', trigger: 'blur'}]}]" />
                      </a-form-item>
                    </a-col>
                  </a-row>
                  <a-row :gutter="12">
                    <a-col :md="12" :sm="24">
                      <a-form-item
                        label="曾用名"
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                      >
                        <a-input v-decorator="['personUsedName', {initialValue: person.personUsedName}]" />
                      </a-form-item>
                    </a-col>
                    <a-col :md="12" :sm="24">
                      <a-form-item
                        label="性别"
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        :required="true"
                      >
                        <a-radio-group v-decorator="['personSex', {initialValue: person.personSex, rules: [{required: true, message: '请输入性别', trigger: 'blur'}]}]" >
                          <a-radio :value="'男'">男</a-radio>
                          <a-radio :value="'女'">女</a-radio>
                        </a-radio-group>
                      </a-form-item>
                    </a-col>
                  </a-row>
                  <a-row :gutter="12">
                    <a-col :md="12" :sm="24">
                      <a-form-item
                        label="类别"
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        :required="true"
                      >
                        <a-select v-decorator="['personType', {initialValue: person.personType, rules: [{required: true, message: '请选择类别' }]}]" placeholder="请选择类别">
                          <a-select-option value="军官">军官</a-select-option>
                          <a-select-option value="军士">军士</a-select-option>
                          <a-select-option value="兵">兵</a-select-option>
                        </a-select>
                      </a-form-item>
                    </a-col>
                    <a-col :md="12" :sm="24">
                      <a-form-item
                        label="部别"
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                      >
                        <a-tree-select
                          v-decorator="['unitId', {initialValue: person.unitId, rules: [{required: true, message: '请选择部别'}]}]"
                          style="width: 100%"
                          :tree-data="treeData"
                          :dropdown-style="{ maxHeight: '300px', overflow: 'auto' }"
                          placeholder="请选择"
                          allow-clear
                          :treeDefaultExpandedKeys="expandedKeys"
                        />
                      </a-form-item>
                    </a-col>
                  </a-row>
                  <a-row :gutter="12">
                    <a-col :md="12" :sm="24">
                      <a-form-item
                        label="部职别"
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                      >
                        <a-input
                          v-decorator="['personJobTitle', {initialValue: person.personJobTitle, rules: [{ required: true, message: '请输入部职别', trigger: 'blur' }]}]" />
                      </a-form-item>
                    </a-col>
                    <a-col :md="12" :sm="24">
                      <a-form-item
                        label="任现职时间"
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                      >
                        <a-date-picker
                          :format="'YYYY-MM-DD'"
                          :fullscreen="false"
                          @panelChange="onPanelChange"
                          v-decorator="['personTenure', {initialValue: person.personTenure, rules: [{required: true, message: '请选择'}]}]"
                          style="width: 100%"/>
                      </a-form-item>
                    </a-col>
                  </a-row>
                  <a-row :gutter="12">
                    <a-col :md="12" :sm="24">
                      <a-form-item
                        label="身份证号"
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                      >
                        <a-input
                          v-decorator="['personIdcard', {initialValue: person.personIdcard, rules: [{ required: true, message: '请输入身份证号', trigger: 'blur' }]}]" />
                      </a-form-item>
                    </a-col>
                    <a-col :md="12" :sm="24">
                      <a-form-item
                        label="民族"
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                      >
                        <a-select v-decorator="['personNation', {initialValue: person.personNation, rules: [{ required: true, message: '请选择民族' }]}]" placeholder="请选择民族">
                          <a-select-option value="汉族">汉族</a-select-option>
                          <a-select-option value="蒙古族">蒙古族</a-select-option>
                          <a-select-option value="回族">回族</a-select-option>
                          <a-select-option value="藏族">藏族</a-select-option>
                          <a-select-option value="维吾尔族">维吾尔族</a-select-option>
                          <a-select-option value="苗族">苗族</a-select-option>
                          <a-select-option value="彝族">彝族</a-select-option>
                          <a-select-option value="壮族">壮族</a-select-option>
                          <a-select-option value="布依族">布依族</a-select-option>
                          <a-select-option value="朝鲜族">朝鲜族</a-select-option>
                          <a-select-option value="满族">满族</a-select-option>
                          <a-select-option value="侗族">侗族</a-select-option>
                          <a-select-option value="瑶族">瑶族</a-select-option>
                          <a-select-option value="白族">白族</a-select-option>
                          <a-select-option value="土家族">土家族</a-select-option>
                          <a-select-option value="哈尼族">哈尼族</a-select-option>
                          <a-select-option value="哈萨克族">哈萨克族</a-select-option>
                          <a-select-option value="傣族">傣族</a-select-option>
                          <a-select-option value="黎族">黎族</a-select-option>
                          <a-select-option value="傈僳族">傈僳族</a-select-option>
                          <a-select-option value="佤族">佤族</a-select-option>
                          <a-select-option value="畲族">畲族</a-select-option>
                          <a-select-option value="高山族">高山族</a-select-option>
                          <a-select-option value="拉祜族">拉祜族</a-select-option>
                          <a-select-option value="水族">水族</a-select-option>
                          <a-select-option value="东乡族">东乡族</a-select-option>
                          <a-select-option value="纳西族">纳西族</a-select-option>
                          <a-select-option value="景颇族">景颇族</a-select-option>
                          <a-select-option value="柯尔克孜族">柯尔克孜族</a-select-option>
                          <a-select-option value="土族">土族</a-select-option>
                          <a-select-option value="达斡尔族">达斡尔族</a-select-option>
                          <a-select-option value="仫佬族">仫佬族</a-select-option>
                          <a-select-option value="羌族">羌族</a-select-option>
                          <a-select-option value="布朗族">布朗族</a-select-option>
                          <a-select-option value="撒拉族">撒拉族</a-select-option>
                          <a-select-option value="毛南族">毛南族</a-select-option>
                          <a-select-option value="仡佬族">仡佬族</a-select-option>
                          <a-select-option value="锡伯族">锡伯族</a-select-option>
                          <a-select-option value="阿昌族">阿昌族</a-select-option>
                          <a-select-option value="普米族">普米族</a-select-option>
                          <a-select-option value="塔吉克族">塔吉克族</a-select-option>
                          <a-select-option value="怒族">怒族</a-select-option>
                          <a-select-option value="乌孜别克族">乌孜别克族</a-select-option>
                          <a-select-option value="俄罗斯族">俄罗斯族</a-select-option>
                          <a-select-option value="鄂温克族">鄂温克族</a-select-option>
                          <a-select-option value="德昂族">德昂族</a-select-option>
                          <a-select-option value="保安族">保安族</a-select-option>
                          <a-select-option value="裕固族">裕固族</a-select-option>
                          <a-select-option value="京族">京族</a-select-option>
                          <a-select-option value="塔塔尔族">塔塔尔族</a-select-option>
                          <a-select-option value="独龙族">独龙族</a-select-option>
                          <a-select-option value="鄂伦春族">鄂伦春族</a-select-option>
                          <a-select-option value="赫哲族">赫哲族</a-select-option>
                          <a-select-option value="门巴族">门巴族</a-select-option>
                          <a-select-option value="珞巴族">珞巴族</a-select-option>
                          <a-select-option value="基诺族">基诺族</a-select-option>
                          <a-select-option value="穿青族">穿青族</a-select-option>
                        </a-select>
                      </a-form-item>
                    </a-col>
                  </a-row>
                </div>
                <div style="width: 33%; display: flex; justify-content: center; align-items: center" @click="handleImage(record)">
                  <a-card :hoverable="true">
                    <img
                      style="object-fit: cover; height: 240px; width: 195px;"
                      slot="cover"
                      alt="图像"
                      :src="person.personImage"
                    />
                  </a-card>
                </div>
              </div>
            </a-form>
            <a-form :form="form">
              <a-row :gutter="12">
                <a-col :md="8" :sm="24">
                  <a-form-item
                    label="出生年月"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                  >
                    <a-date-picker
                      :format="'YYYY-MM-DD'"
                      :fullscreen="false"
                      @panelChange="onPanelChange"
                      v-decorator="['personBirthdate', {initialValue: person.personBirthdate, rules: [{ required: true, message: '请选择'}]}]"
                      style="width: 100%"/>
                  </a-form-item>
                </a-col>
                <a-col :md="8" :sm="24">
                  <a-form-item
                    label="入伍年月"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                  >
                    <a-date-picker
                      :format="'YYYY-MM-DD'"
                      :fullscreen="false"
                      @panelChange="onPanelChange"
                      v-decorator="['personEnlistmentDate', {initialValue: person.personEnlistmentDate, rules: [{required: true, message: '请选择'}]}]"
                      style="width: 100%"/>
                  </a-form-item>
                </a-col>
                <a-col :md="8" :sm="24">
                  <a-form-item
                    label="政治面貌"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                  >
                    <a-select v-decorator="['personPoliticsStatus', {initialValue: person.personPoliticsStatus, rules: [{ required: true, message: '请选择政治面貌' }]}]" placeholder="请选择政治面貌" @change="handleChangePolitics">
                      <a-select-option value="中共党员">中共党员</a-select-option>
                      <a-select-option value="中共预备党员">中共预备党员</a-select-option>
                      <a-select-option value="共青团员">共青团员</a-select-option>
                      <a-select-option value="民革党员">民革党员</a-select-option>
                      <a-select-option value="民盟盟员">民盟盟员</a-select-option>
                      <a-select-option value="民建会员">民建会员</a-select-option>
                      <a-select-option value="民进会员">民进会员</a-select-option>
                      <a-select-option value="农工党党员">农工党党员</a-select-option>
                      <a-select-option value="致公党党员">致公党党员</a-select-option>
                      <a-select-option value="九三学社社员">九三学社社员</a-select-option>
                      <a-select-option value="台盟盟员">台盟盟员</a-select-option>
                      <a-select-option value="无党派人士">无党派人士</a-select-option>
                      <a-select-option value="群众">群众</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="12">
                <a-col :md="8" :sm="24">
                  <a-form-item
                    label="入党团时间"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                  >
                    <div v-if="this.isPolitics">
                      <a-date-picker disabled v-decorator="['personPartyTime']" style="width: 100%"/>
                    </div>
                    <div v-else>
                    <a-date-picker
                      :format="'YYYY-MM-DD'"
                      :fullscreen="false"
                      @panelChange="onPanelChange"
                      v-decorator="['personPartyTime', {initialValue: person.personPartyTime}]"
                      style="width: 100%"/>
                    </div>
                  </a-form-item>
                </a-col>
                <a-col :md="8" :sm="24">
                  <a-form-item
                    label="军衔"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                  >
                    <a-select v-decorator="['personMilitaryRank', {initialValue: person.personMilitaryRank, rules: [{ required: true, message: '请选择军衔' }]}]" placeholder="请选择军衔">
                      <a-select-option value="列兵">列兵</a-select-option>
                      <a-select-option value="上等兵">上等兵</a-select-option>
                      <a-select-option value="下士">下士</a-select-option>
                      <a-select-option value="中士">中士</a-select-option>
                      <a-select-option value="上士">上士</a-select-option>
                      <a-select-option value="四级军士长">四级军士长</a-select-option>
                      <a-select-option value="三级军士长">三级军士长</a-select-option>
                      <a-select-option value="二级军士长">二级军士长</a-select-option>
                      <a-select-option value="一级军士长">一级军士长</a-select-option>
                      <a-select-option value="少尉">少尉</a-select-option>
                      <a-select-option value="中尉">中尉</a-select-option>
                      <a-select-option value="上尉">上尉</a-select-option>
                      <a-select-option value="少校">少校</a-select-option>
                      <a-select-option value="中校">中校</a-select-option>
                      <a-select-option value="上校">上校</a-select-option>
                      <a-select-option value="大校">大校</a-select-option>
                      <a-select-option value="少将">少将</a-select-option>
                      <a-select-option value="中将">中将</a-select-option>
                      <a-select-option value="上将">上将</a-select-option>
                      <a-select-option value="其它">其它</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :md="8" :sm="24">
                  <a-form-item
                    label="现军衔时间"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                  >
                    <a-date-picker
                      :format="'YYYY-MM-DD'"
                      :fullscreen="false"
                      @panelChange="onPanelChange"
                      v-decorator="['personMilitaryRankTime', {initialValue: person.personMilitaryRankTime, rules: [{required: true, message: '请选择'}]}]"
                      style="width: 100%"/>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="12">
                <a-col :md="8" :sm="24">
                  <a-form-item
                    label="职级"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                  >
                    <a-select v-decorator="['personRank', {initialValue: person.personRank, rules: [{required: true, message: '请选择职级' }]}]" placeholder="请选择职级" @change="handleChange">
                      <a-select-option value="无">无</a-select-option>
                      <a-select-option value="排职">排职</a-select-option>
                      <a-select-option value="连级副职">连级副职</a-select-option>
                      <a-select-option value="连级正职">连级正职</a-select-option>
                      <a-select-option value="营级副职">营级副职</a-select-option>
                      <a-select-option value="营级正职">营级正职</a-select-option>
                      <a-select-option value="团级副职">团级副职</a-select-option>
                      <a-select-option value="团级正职">团级正职</a-select-option>
                      <a-select-option value="师级副职">师级副职</a-select-option>
                      <a-select-option value="师级正职">师级正职</a-select-option>
                      <a-select-option value="军级副职">军级副职</a-select-option>
                      <a-select-option value="军级正职">军级正职</a-select-option>
                      <a-select-option value="战区级副职">战区级副职</a-select-option>
                      <a-select-option value="战区级正职">战区级正职</a-select-option>
                      <a-select-option value="初职">初职</a-select-option>
                      <a-select-option value="中职">中职</a-select-option>
                      <a-select-option value="副高职">副高职</a-select-option>
                      <a-select-option value="正高职">正高职</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :md="8" :sm="24">
                  <a-form-item
                    label="现职级时间"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                  >
                    <div v-if="this.isShow">
                      <a-date-picker disabled v-decorator="['personRankTime']" style="width: 100%"/>
                    </div>
                    <div v-else>
                      <a-date-picker
                        :format="'YYYY-MM-DD'"
                        :fullscreen="false"
                        @panelChange="onPanelChange"
                        v-decorator="['personRankTime', {initialValue: person.personRankTime}]"
                        style="width: 100%"/>
                    </div>
                  </a-form-item>
                </a-col>
                <a-col :md="8" :sm="24">
                  <a-form-item
                    label="文化程度"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                  >
                    <a-select v-decorator="['personEduLevel', {initialValue: person.personEduLevel, rules: [{ required: true, message: '请选择文化程度' }]}]" placeholder="请选择文化程度">
                      <a-select-option value="初中">初中</a-select-option>
                      <a-select-option value="高中">高中</a-select-option>
                      <a-select-option value="中专">中专</a-select-option>
                      <a-select-option value="大专">大专</a-select-option>
                      <a-select-option value="本科">本科</a-select-option>
                      <a-select-option value="硕士">硕士</a-select-option>
                      <a-select-option value="博士">博士</a-select-option>
                      <a-select-option value="博士后">博士后</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="12">
                <a-col :md="8" :sm="24">
                  <a-form-item
                    label="是否婚恋"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    :required="true"
                  >
                    <a-select v-decorator="['personMarriageStatus', {initialValue: person.personMarriageStatus, rules: [{ required: true, message: '请选择婚恋情况' }]}]" placeholder="请选择婚恋情况">
                      <a-select-option value="恋爱">恋爱</a-select-option>
                      <a-select-option value="已婚">已婚</a-select-option>
                      <a-select-option value="未婚">未婚</a-select-option>
                      <a-select-option value="离异">离异</a-select-option>
                      <a-select-option value="丧偶">丧偶</a-select-option>
                      <a-select-option value="再婚">再婚</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :md="8" :sm="24">
                  <a-form-item
                    label="籍贯"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                  >
                    <a-input
                      v-decorator="['personNativePlace', {initialValue: person.personNativePlace, rules: [{ required: true, message: '请输入籍贯', trigger: 'blur' }]}]" />
                  </a-form-item>
                </a-col>
                <a-col :md="8" :sm="24">
                  <a-form-item
                    label="家庭地址"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                  >
                    <a-input v-decorator="['personHomeAddr', {initialValue: person.personHomeAddr, rules: [{required: true, message: '请输入家庭地址', trigger: 'blur'}]}]" />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="12">
                <a-col :md="8" :sm="24">
                  <a-form-item
                    label="QQ及Email"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                  >
                    <a-input v-decorator="['personQqEmail', {initialValue: person.personQqEmail, rules: [{required: true, message: '请输入QQ及Email', trigger: 'blur'}]}]" />
                  </a-form-item>
                </a-col>
                <a-col :md="8" :sm="24">
                  <a-form-item
                    label="出生地"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                  >
                    <a-input
                      v-decorator="['personBirthplace', {initialValue: person.personBirthplace, rules: [{ required: true, message: '请输入出生地', trigger: 'blur' }]}]" />
                  </a-form-item>
                </a-col>
                <a-col :md="8" :sm="24">
                  <a-form-item
                    label="入伍地"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                  >
                    <a-input v-decorator="['personEnlistmentPlace', {initialValue: person.personEnlistmentPlace, rules: [{required: true, message: '请输入入伍地', trigger: 'blur'}]}]" />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="12">
                <a-col :md="8" :sm="24">
                  <a-form-item
                    label="家庭电话"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                  >
                    <a-input
                      v-decorator="['personHomePhone', {initialValue: person.personHomePhone, rules: [{ required: true, message: '请输入家庭电话', trigger: 'blur' }]}]" />
                  </a-form-item>
                </a-col>
                <a-col :md="8" :sm="24">
                  <a-form-item
                    label="手机号码"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                  >
                    <a-input v-decorator="['personPhone', {initialValue: person.personPhone, rules: [{required: true, message: '请输入手机号码', trigger: 'blur'}]}]" />
                  </a-form-item>
                </a-col>
                <a-col :md="8" :sm="24">
                  <a-form-item
                    label="邮政编码"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                  >
                    <a-input
                      v-decorator="['personPostcode', {initialValue: person.personPostcode, rules: [{ required: true, message: '请输入邮政编码', trigger: 'blur' }]}]" />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-form-item style="text-align: right">
                <a-button type="primary" style="margin-bottom: 15px; margin-right: 12px" @click="handleSubmit">
                  确认
                </a-button>
              </a-form-item>
            </a-form>
          </a-spin>
        </div>
        <Experience ref="experience" @ok="handleOk"></Experience>
        <Experience1 ref="experience2" @ok="handleOk"></Experience1>
        <SocialRelation ref="socialRelation" @ok="handleOk"></SocialRelation>
        <change-image ref="changeImage" @ok="handleOk"/>
      </a-card>
    </a-modal>
  </div>
</template>

<script>
import moment from 'moment'
import { editSoldier } from '@/api/basic/soldier'
import { listUnitTree } from '@/api/basic/unit'
import { TreeSelect } from 'ant-design-vue'
import Experience from './Experience'
import Experience1 from './Experience2'
import SocialRelation from './SocialRelation'
import ChangeImage from './ChangeImage'

export default {
  components: {
    ChangeImage,
    SocialRelation,
    Experience1,
    Experience,
    moment,
    ATreeSelect: TreeSelect
  },
  data () {
    return {
      preKey: '0',
      isShow: false,
      isPolitics: false,
      tabListNoTitle: [
        {
          key: '0',
          tab: '基本信息'
        },
        {
          key: '1',
          tab: '个人履历'
        },
        {
          key: '2',
          tab: '参加何重大活动'
        },
        {
          key: '3',
          tab: '受何奖惩'
        },
        {
          key: '4',
          tab: '家庭成员'
        },
        {
          key: '5',
          tab: '主要社会关系'
        },
        {
          key: '6',
          tab: '国境外关系'
        }
      ],
      noTitleKey: this.$route.query.noTitleKey === undefined ? '0' : this.$route.query.noTitleKey,
      treeData: [],
      expandedKeys: [1],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 10 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 }
      },
      visible: false,
      confirmLoading: false,
      record: {},
      person: {},
      dateFormat: 'YYYY-MM-DD',
      personRank: '',

      form: this.$form.createForm(this)
    }
  },
  created () {
    listUnitTree()
      .then(res => {
        if (res.message !== 'error') {
          this.treeData = res.result
        } else {
          this.$message.error('操作失败！')
        }
      })
  },
  methods: {
    onTabChange (key, type) {
      this[type] = key
      if (this.preKey === '0') {
        // this.$refs.experience.handleCancel()
        // this.$refs.experience1.handleCancel()
        // this.$refs.experience2.handleCancel()
      } else if (this.preKey === '1') {
        this.$refs.experience.handleCancel()
      } else if (this.preKey === '2') {
        this.$refs.experience2.handleCancel()
      } else if (this.preKey === '3') {
        this.$refs.experience2.handleCancel()
      } else if (this.preKey === '4') {
        this.$refs.socialRelation.handleCancel()
      } else if (this.preKey === '5') {
        this.$refs.socialRelation.handleCancel()
      } else if (this.preKey === '6') {
        this.$refs.socialRelation.handleCancel()
      }
      this.preKey = key
      if (this.noTitleKey === '0') {
        this.$refs.experience.handleCancel()
        this.$refs.experience2.handleCancel()
        this.$refs.socialRelation.handleCancel()
      } else if (this.noTitleKey === '1') {
        this.handleExperience1()
      } else if (this.noTitleKey === '2') {
        this.handleExperience2()
      } else if (this.noTitleKey === '3') {
        this.handleExperience3()
      } else if (this.noTitleKey === '4') {
        this.handleSocialRelation1()
      } else if (this.noTitleKey === '5') {
        this.handleSocialRelation2()
      } else if (this.noTitleKey === '6') {
        this.handleSocialRelation3()
      }
    },
    handleImage (record) {
      this.$refs.changeImage.upload(record)
    },
    handleExperience1 () {
      this.$refs.experience.experience(this.record)
    },
    handleExperience2 () {
      this.$refs.experience2.experience(this.record, 2)
    },
    handleExperience3 () {
      this.$refs.experience2.experience(this.record, 3)
    },
    handleSocialRelation1 () {
      this.$refs.socialRelation.socialRelation(this.record, 1)
    },
    handleSocialRelation2 () {
      this.$refs.socialRelation.socialRelation(this.record, 2)
    },
    handleSocialRelation3 () {
      this.$refs.socialRelation.socialRelation(this.record, 3)
    },
    handleOk () {
      // this.$refs.table.clearSelected()
      // this.$refs.experience.refresh(false)
      this.visible = false
      this.noTitleKey = '0'
      this.$refs.experience.handleCancel()
      this.$refs.experience2.handleCancel()
      this.$refs.socialRelation.handleCancel()
    },
    onPanelChange (value, mode) {
      console.log(value, mode)
    },
    edit (record) {
      this.visible = true
      this.person = record
      this.record = record
      this.person.personTenure = moment(this.person.personTenure)
      this.person.personBirthdate = moment(this.person.personBirthdate)
      this.person.personEnlistmentDate = moment(this.person.personEnlistmentDate)
      this.person.personPartyTime = moment(this.person.personPartyTime)
      this.person.personMilitaryRankTime = moment(this.person.personMilitaryRankTime)
      this.person.personRankTime = moment(this.person.personRankTime)
    },
    handleChange (value) {
      if (value === '无') {
        this.isShow = true
      } else {
        this.isShow = false
      }
    },
    handleChangePolitics (value) {
      if (value === '群众') {
        this.isPolitics = true
      } else {
        this.isPolitics = false
      }
    },
    handleSubmit () {
      const { form: { validateFields } } = this
      this.confirmLoading = true
      validateFields((errors, values) => {
        if (!errors) {
          // UTC时间转为标准时间
          const delayTime = new Date(values.personTenure).toJSON()
          values.personTenure = new Date(
            +new Date(delayTime) + 8 * 3600 * 1000
          )
            .toISOString()
            .replace(/T/g, ' ')
            .replace(/\.[\d]{3}Z/, '')
          const delayTime1 = new Date(values.personBirthdate).toJSON()
          values.personBirthdate = new Date(
            +new Date(delayTime1) + 8 * 3600 * 1000
          )
            .toISOString()
            .replace(/T/g, ' ')
            .replace(/\.[\d]{3}Z/, '')
          const delayTime2 = new Date(values.personEnlistmentDate).toJSON()
          values.personEnlistmentDate = new Date(
            +new Date(delayTime2) + 8 * 3600 * 1000
          )
            .toISOString()
            .replace(/T/g, ' ')
            .replace(/\.[\d]{3}Z/, '')
          const delayTime3 = new Date(values.personPartyTime).toJSON()
          values.personPartyTime = new Date(
            +new Date(delayTime3) + 8 * 3600 * 1000
          )
            .toISOString()
            .replace(/T/g, ' ')
            .replace(/\.[\d]{3}Z/, '')
          const delayTime4 = new Date(values.personMilitaryRankTime).toJSON()
          values.personMilitaryRankTime = new Date(
            +new Date(delayTime4) + 8 * 3600 * 1000
          )
            .toISOString()
            .replace(/T/g, ' ')
            .replace(/\.[\d]{3}Z/, '')
          const delayTime5 = new Date(values.personRankTime).toJSON()
          values.personRankTime = new Date(
            +new Date(delayTime5) + 8 * 3600 * 1000
          )
            .toISOString()
            .replace(/T/g, ' ')
            .replace(/\.[\d]{3}Z/, '')
          values.personImage = this.person.personImage
          if (values.personRank === '无') {
            values.personRankTime = null
          }
          if (values.personPoliticsStatus === '群众') {
            values.personPartyTime = null
          }
          editSoldier(Object.assign(values, { 'personId': this.person.personId }))
            .then(res => {
              if (res.message !== 'error') {
                this.visible = false
                this.confirmLoading = false
                this.form.resetFields()
                this.$emit('ok')
              } else {
                this.confirmLoading = false
                this.$message.error('操作失败！')
              }
            })
        } else {
          this.confirmLoading = false
        }
      })
    },
    handleCancel () {
      this.form.resetFields()
      this.noTitleKey = '0'
      this.$refs.experience.handleCancel()
      this.$refs.experience2.handleCancel()
      this.$refs.socialRelation.handleCancel()
      this.visible = false
    }
  }
}
</script>
